<template>
    <div>
        <div class="shopcart">
            <div class="content">
                <div class="content-left">
                    <div class="logo-wrapper">
                        <div class="logo " :class="{highlight:totalCount>0}" @click="toggleShow">
                            <i class="iconfont icon-shopping_cart highlight"></i>
                        </div>
                        <div class="num" v-if="totalCount">{{totalCount}}</div>
                    </div>
                    <div class="price highlight">￥{{totalPrice}}</div>
                    <div class="desc">另需配送费￥{{info.deliveryPrice}}元</div>
                </div>
                <div class="content-right">
                    <div class="pay" :class="needPrice>0?'not-enough':'enough'">
                        {{needPrice>0?`还差￥${needPrice}元起送`:'去结算'}}
                    </div>
                </div>
            </div>
            <transition name="car">
                <div class="shopcart-list" v-show="isShow">
                    <div class="list-header">
                        <h1 class="title">购物车</h1>
                        <span class="empty" @click="clearAll">清空</span>
                    </div>
                    <div class="list-content" ref="carList">
                        <ul>
                            <li class="food" v-for="item in shopCart">
                                <span class="name">{{item.name}}</span>
                                <div class="price"><span>￥{{item.count*item.price}}</span></div>
                                <div class="cartcontrol-wrapper">
                                    <CartControl :food="item"></CartControl>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>

        </div>
        <transition name="fade">
            <div class="list-mask" v-show="isShow" @click="toggleShow"></div>
        </transition>

    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import {mapState,mapGetters} from 'vuex'
    import { MessageBox } from 'mint-ui';
    import CartControl from "../CartControl/CartControl";
    export default {
        name: "ShopCart",
        components:{
            CartControl
        },
        data(){
          return{
              isShow:false,
          }
        },
        methods:{
            //点击切换购物车的显示隐藏
            toggleShow(){
                if(this.totalCount>0){
                    this.isShow=!this.isShow
                    if(!this.BS){
                        this.BS=new BScroll(this.$refs.carList,{
                            pullUpLoad: true,
                            click: true,
                            cancelable:false
                        })
                    }
                }else {
                    return
                }
            },
            //清空购物车
            clearAll(){
                //不要在这里操作购物车数据，而是去对应的actions或mutation
                MessageBox({
                    title: '提示',
                    showCancelButton: true
                });
                MessageBox.confirm('清空购物车?').then((action) => {
                    //在这里执行清空购物车的回调
                    this.$store.dispatch('clearAll')
                }, cancle => {
                    return
                })
            }
        },
        computed:{
            ...mapState({
                shopCart: state=>state.shop.shopCart,
                info:state=>state.shop.shop.info||{}
            }),
            ...mapGetters(['totalCount','totalPrice']),
            //差价
            needPrice(){
                let price=this.info.minPrice-this.totalPrice
                return price
            }
        },
        watch:{
            totalCount(){
                //购物车打开且物品总量清空时，隐藏购物车物品面板
                if(this.isShow===true&&this.totalCount<=0){
                    this.isShow=false
                }
                //这里刷新且在isShow为真的情况下是为了提高效率，同时在购物车列表不需要滑动便能查看时取消滚动条
                if(this.isShow&&this.BS){
                    this.$nextTick(()=>{
                        this.BS.refresh()
                    })
                }
            },
            isShow(){
                //这里刷新是为了让用户在点开购物车时便能滑动
                if(this.BS){
                    this.$nextTick(()=>{
                        this.BS.refresh()
                    })
                }
            }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/minix.styl"
    .shopcart
        position: fixed
        left: 0
        bottom: 0
        z-index: 50
        width: 100%
        height: 48px
        .content
            display: flex
            background: #141d27
            font-size: 0
            color: rgba(255, 255, 255, 0.4)
            .content-left
                flex: 1
                .logo-wrapper
                    display: inline-block
                    vertical-align: top
                    position: relative
                    top: -10px
                    margin: 0 12px
                    padding: 6px
                    width: 56px
                    height: 56px
                    box-sizing: border-box
                    border-radius: 50%
                    background: #141d27
                    .logo
                        width: 100%
                        height: 100%
                        border-radius: 50%
                        text-align: center
                        background: #2b343c
                        &.highlight
                            background: $green
                        .icon-shopping_cart
                            line-height: 44px
                            font-size: 24px
                            color: #80858a
                            &.highlight
                                color: #fff
                    .num
                        position: absolute
                        top: 0
                        right: 0
                        width: 24px
                        height: 16px
                        line-height: 16px
                        text-align: center
                        border-radius: 16px
                        font-size: 9px
                        font-weight: 700
                        color: #ffffff
                        background: rgb(240, 20, 20)
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4)
                .price
                    display: inline-block
                    vertical-align: top
                    margin-top: 12px
                    line-height: 24px
                    padding-right: 12px
                    box-sizing: border-box
                    border-right: 1px solid rgba(255, 255, 255, 0.1)
                    font-size: 16px
                    font-weight: 700
                    &.highlight
                        color: #fff
                .desc
                    display: inline-block
                    vertical-align: top
                    margin: 12px 0 0 12px
                    line-height: 24px
                    font-size: 10px
            .content-right
                flex: 0 0 105px
                width: 105px
                .pay
                    height: 48px
                    line-height: 48px
                    text-align: center
                    font-size: 12px
                    font-weight: 700
                    &.not-enough
                        background: #2b333b
                    &.enough
                        background: #00b43c
                        color: #fff
        .shopcart-list
            position: absolute
            left: 0
            top: 0
            z-index: -1
            width: 100%
            transform translateY(-100%)
            &.car-enter,&.car-leave-to
             transform translateY(0)
             opacity 0
            &.car-enter-active,&.car-leave-active
              transition all 0.5s
            .list-header
                height: 40px
                line-height: 40px
                padding: 0 18px
                background: #f3f5f7
                border-bottom: 1px solid rgba(7, 17, 27, 0.1)
                .title
                    line-height 40px
                    float: left
                    font-size: 14px
                    color: rgb(7, 17, 27)
                .empty
                    float: right
                    font-size: 12px
                    color: rgb(0, 160, 220)

            .list-content
                padding: 0 18px
                max-height: 217px
                overflow: hidden
                background: #fff
                .food
                    position: relative
                    padding: 12px 0
                    box-sizing: border-box
                    bottom-border-1px(rgba(7, 17, 27, 0.1))
                    .name
                        line-height: 24px
                        font-size: 14px
                        color: rgb(7, 17, 27)
                    .price
                        position: absolute
                        right: 90px
                        bottom: 12px
                        line-height: 24px
                        font-size: 14px
                        font-weight: 700
                        color: rgb(240, 20, 20)
                    .cartcontrol-wrapper
                        position: absolute
                        right: 0
                        bottom: 6px

    .list-mask
        position: fixed
        top: 0
        left: 0
        width: 100%
        height: 100%
        z-index: 40
        backdrop-filter: blur(10px)
        opacity: 1
        background: rgba(7, 17, 27, 0.6)
        &.fade-enter-active, &.fade-leave-active
            transition: all 0.5s
        &.fade-enter, &.fade-leave-to
            opacity: 0
</style>